<template>
  <el-form ref="formRef" :model="formData" label-width="86px" :label-width="props.labelWidth" :disabled="pageType == 'look'">
    <template v-if="fission">
      <el-form-item v-if="storeCustomers" label="引流员工" prop="user_list" :rules="rules.user_list">
        <div class="form-staffs">
          <div class="staffs">
            <el-tag v-for="item in creators" :key="item.name" class="staffs_item" :closable="pageType !== 'look'" @close="handleClose(item)" :type="item.id">
              {{ item.name }}
            </el-tag>
          </div>
        </div>
        <el-button class="select-staffs" @click="openDepart">选择成员</el-button>
      </el-form-item>
    </template>
    <el-form-item v-if="props.isRenderFlag" label="欢迎语设置">
      <el-switch v-model="welcome_flag" :active-value="1" :inactive-value="2" />
    </el-form-item>
    <template v-if="welcome_flag == 1">
      <el-form-item class="welcome_type">
        <el-radio-group v-model="formData.welcome.type">
          <el-radio :label="1">新建欢迎语</el-radio>
          <el-radio :label="3">已有欢迎语</el-radio>
        </el-radio-group>
        <div v-if="formData.welcome.type == 3" style="margin-bottom: 10px">
          <el-button @click="onChooseWelcome">选择已有欢迎语</el-button>
        </div>
      </el-form-item>
      <el-form-item prop="welcome.content" :rules="isRules ? rules.content : undefined">
        <div class="container">
          <el-input @input="onName" id="welcomeContent" v-model="formData.welcome.content" :rows="6" resize="none" type="textarea" placeholder="请输入欢迎语" class="content_input" />
          <div class="text_btn">
            <div>
              <span @click="onNickName('##客户姓名##')" style="cursor: pointer">插入客户昵称</span>
              <span style="margin: 0 6px 0 18px; color: #33302d; cursor: pointer" @click="onOpenUpload('1', true)">选择文本</span>
              <span style="cursor: pointer" @click="emojiVisible = !emojiVisible">😊</span>
              <span @click="onNickName('##员工别名##')" style="cursor: pointer" class="staff">插入员工别名</span>
            </div>
            <div>
              <span class="color:#ff6b00">{{ formData.welcome.content.length }} <span style="color: #969696">/1000</span> </span>
            </div>
          </div>
          <!-- 表情管理 -->
          <div class="emoj_box">
            <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
          </div>
          <!-- 文件信息 -->
          <el-scrollbar class="upload_list_box" max-height="160px">
            <ul class="upload_list">
              <template v-for="(item, index) in previewData" :key="item.id">
                <li v-if="item.type > 0" class="upload_item">
                  <img class="file_icon" :src="item.cur_icon" alt="" />
                  <div class="file_name">{{ item.name }}</div>
                  <img class="del_icon" @click="onRemove(item)" src="@/assets/image/channel/remove_icon.png" />
                </li>
              </template>
            </ul>
          </el-scrollbar>
          <!-- 选择素材 -->
          <el-popover placement="top-start" popper-class="pop_select_box" width="auto" trigger="hover">
            <template #reference>
              <div class="text_hover">
                <el-icon><Plus /></el-icon> 添加 <span v-for="(i, index) in uploadList" :key="i.id">{{ i.name }}<span v-if="uploadList.length - 1 != index">/</span> </span>
              </div>
            </template>
            <template #default>
              <div class="upload_pop">
                <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="onOpenUpload(item.id)">
                  <img class="item_pop_icon" :src="item.icon" alt="" />
                  <span class="item_pop_name">{{ item.name }}</span>
                </div>
              </div>
            </template>
          </el-popover>
          <!-- 欢迎语预览 -->
          <Phone v-if="props.isRenderPreview" :fileList="previewData" />
        </div>
      </el-form-item>
    </template>

    <template v-if="storeCustomers">
      <template v-if="formData.time_welcome_flag == 1">
        <WelcomeTime v-for="(item, index) in formData.time_welcome" :key="index" :weekOption="weekOptionList[index]" :timeIndex="index" :pageType="pageType" :lookData="lookData[index]" @submit="onData" @delTime="onDelTime"> </WelcomeTime>
        <el-form-item v-if="formData.time_welcome_flag == 1">
          <el-button @click="addTime">添加时段</el-button>
        </el-form-item>
      </template>
      <div style="text-align: center; border-top: 1px solid #d9d9d9; margin-bottom: 20px"></div>
      <el-form-item label="活动图文" prop="link_img" :rules="rules.link_img">
        <div class="img_box">
          <div>图文封面</div>
          <UploadImg
            :rule="{
              type: 'jpg|JPG|jpeg|JPEG|png|PNG',
              unit: 'MB',
              size: 2
            }"
            :url="formData.link_img"
            @submit="(v) => (formData.link_img = v)"
          />
          <div class="text">图片支持JPG、PNG、JPEG格式，大小2M以内，建议宽高比为1：1，尺寸200px*200px。</div>
        </div>
      </el-form-item>
      <div style="width: 780px">
        <el-form-item label="活动标题" label-width="190px" prop="link_title" :rules="rules.link_title">
          <el-input v-model="formData.link_title" placeholder="呼朋唤友, 免费拿奖品" maxlength="32" show-word-limit />
        </el-form-item>
        <el-form-item label="填写描述" label-width="190px" prop="link_desc" :rules="rules.link_desc">
          <el-input maxlength="150" show-word-limit v-model="formData.link_desc" :rows="4" type="textarea" placeholder="好友，你可以给我打个call吗？" class="content_input" />
        </el-form-item>
      </div>
      <el-form-item v-if="welcomeType" label="已领红包客户打标" label-width="130px">
        <div>
          <el-tag v-for="tag in AllTags" :key="tag" class="mx-1" size="small" type="warning" style="margin-right: 5px" :closable="pageType !== 'look'" @close="onClose1(tag)">
            {{ tag.name }}
          </el-tag>
        </div>
        <el-button @click="selecTag">选择标签</el-button>
      </el-form-item>
    </template>
    <template v-if="cusTag">
      <el-form-item
        label="客户打标"
        label-width="130px"
        prop="tag_list"
        :rules="[
          {
            required: tag_flag == 1 ? true : false,
            message: '请选择客户标签',
            trigger: 'blur'
          }
        ]"
      >
        <el-switch v-model="tag_flag" :active-value="1" :inactive-value="2" />
        <div v-show="tag_flag == 1">
          <el-tag v-for="tag in AllTags" :key="tag" class="mx-1" size="small" type="warning" style="margin-right: 5px" :closable="pageType !== 'look'" @close="onClose1(tag)">
            {{ tag.name }}
          </el-tag>
        </div>
        <el-button v-show="tag_flag == 1" @click="selecTag" size="small">选择标签</el-button>
      </el-form-item>
    </template>

  </el-form>
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getFiles" />
  <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
  <BatchLabel ref="BatchLabelRef" @save="getTags" />
  <ChooseWelcome ref="ChooseWelcomeRef" @submit="submitHandel" />
</template>

<script setup lang="ts">
import Phone from './Phone.vue'
import ChooseWelcome from './ChooseWelcome.vue'
import UploadImg from './UploadImg.vue'
import ZWDepart from '@/components/ZWDepart.vue'
import BatchLabel from '@/components/BatchLabel.vue'
// import ZWMatericalLib from '@/components/channelNew/ZWMatericalLib.vue'
import ZWMatericalLib from '@/components/channelNewOriginal/ZWMatericalLib.vue'
import ZWEmoji from '@/components/ZWEmoji.vue'
import WelcomeTime from './WelcomeTime.vue'
import { ref, reactive, withDefaults, defineProps, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getSetionId, useInsertWelcomeContent } from '@/utils/utils'
interface Props {
  welcomeType: any
  storeCustomers: any
  fission: any
  pageType: any
  labelWidth?: string | number
  isRenderPreview?: boolean // 是否展示欢迎语预览样机
  isRenderFlag?: boolean // 是否展示欢迎语设置switch
  isRules?: boolean // 是否使用默认的欢迎语规则
  filters: any
  cusTag: false
}
const props = withDefaults(defineProps<Props>(), {
  welcomeType: false,
  storeCustomers: true,
  fission: true,
  isRenderPreview: true,
  isRenderFlag: true,
  isRules: true,
  labelWidth: '120px',
  pageType: '',
  filters: [],
  cusTag: false
})
const emit = defineEmits(['submit'])
let uploadList = reactive([
  { id: '2', icon: '/static/file/pic.png', name: '图片' },
  { id: '3', icon: '/static/file/mp3.png', name: '音频' },
  { id: '4', icon: '/static/file/mov.png', name: '视频' },
  { id: '5', icon: '/static/file/ysb.png', name: '文件' },
  { id: '6', icon: '/static/file/link.png', name: '链接' },
  { id: '8', icon: '/static/file/wbgg.png', name: '抽奖' },
  { id: '27', icon: '/static/file/form.png', name: '收集表' },
  { id: '99', icon: '/static/file/shop.png', name: '电商' },
  { id: '15', icon: '/static/file/official.png', name: '公众号' },
  { id: '11', icon: '/static/file/miniApp.png', name: '小程序' }
])
const onURL = (data: any) => {
  let fileTYpe = {
    '.pdf': '/static/file/pdf.png',
    '.doc': '/static/file/doc.png',
    '.docx': '/static/file/doc.png',
    '.xls': '/static/file/xls.png',
    '.xlsx': '/static/file/xls.png',
    '.ppt': '/static/file/ppt.png',
    '.pptx': '/static/file/ppt.png'
  }
  if (data) {
    const last = data.substring(data.lastIndexOf('.'))
    return fileTYpe[last] || '/static/file/file.png'
  }
}
const formRef = ref<any>(null)
const DepartRef: any = ref<any>(null) // 部门弹框类型
const ZWMatericalLibRef: any = ref(null)
const BatchLabelRef: any = ref<any>(null) // 选择标签弹框
const emojiVisible = ref(false)
const fileList = ref([])
const creators = ref([]) // 创建人options
const AllTags = ref([]) // 选择标签options
const tag_flag = ref(1)
const welcome_flag = ref(1)
const formData = ref<any>({
  user_list: [],
  welcome: {
    type: 1,
    content: '',
    attachment: [],
    local_link: [],
    local_content: []
  },
  time_welcome_flag: 2,
  time_welcome: [{ content: '', week: [] }],
  link_img: '',
  link_title: '',
  link_desc: '',
  tag_list: []
})
const onInsertText = useInsertWelcomeContent('welcomeContent', formData.value, 'welcome.content')
const rules = reactive({
  user_list: [{ required: true, message: '请选择引流员工', trigger: 'change' }],
  link_img: [{ required: true, message: '请选择图文封面', trigger: 'change' }],
  link_title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
  link_desc: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
  content: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }],
  week: [{ required: true, message: '请选择发送周期', trigger: 'change' }],
  send_time: [{ required: true, message: '请选择发送时间', trigger: 'change' }]
})
const onDelTime = (index: any) => {
  formData.value.time_welcome.splice(index, 1)
  weekOptionList.value.splice(index, 1)
}
const weekOptionList = ref<any>([])
const onIsTimeDisabled = (data: any, active: any) => {
  console.log(data, active)
  // 星期
  let weekOption = [
    { label: 1, name: '周一', disabled: false },
    { label: 2, name: '周二', disabled: false },
    { label: 3, name: '周三', disabled: false },
    { label: 4, name: '周四', disabled: false },
    { label: 5, name: '周五', disabled: false },
    { label: 6, name: '周六', disabled: false },
    { label: 0, name: '周日', disabled: false }
  ]
  let clearWeek: any = []
  let weekList: any = []
  formData.value.time_welcome.forEach((item: any, index: any) => {
    if (data.send_time[0] == item.send_time[0] && data.send_time[1] == item.send_time[1] && index != active) {
      if (index != active) {
        weekList = [...weekList, ...item.week]
      }
      weekOption.forEach((it: any, i: any) => {
        weekOption[i].disabled = false
        if (item.week.includes(it.label)) {
          console.log('周期1')
          weekOption[i].disabled = true
        } else {
          clearWeek.push(it.label)
        }
      })
    }
  })
  let num = 0

  formData.value.time_welcome.forEach((item: any, i: any) => {
    if (data.send_time[0] == item.send_time[0] && data.send_time[1] == item.send_time[1]) {
      console.log('周期', active)
      num++
    }
  })
  if (num == 1) {
    weekOption = [
      { label: 1, name: '周一', disabled: weekList.includes(1) },
      { label: 2, name: '周二', disabled: weekList.includes(2) },
      { label: 3, name: '周三', disabled: weekList.includes(3) },
      { label: 4, name: '周四', disabled: weekList.includes(4) },
      { label: 5, name: '周五', disabled: weekList.includes(5) },
      { label: 6, name: '周六', disabled: weekList.includes(6) },
      { label: 0, name: '周日', disabled: weekList.includes(0) }
    ]
  }
  console.log('22222222')

  weekOptionList.value[active] = weekOption
}
const onData = (index: any, data: any) => {
  formData.value.time_welcome[index] = data
  formData.value.time_welcome.forEach((item: any, i: any) => {
    onIsTimeDisabled(item, i)
  })
}
//更改欢迎语
const onName = () => {
  previewData.value[0] = {
    type: 0,
    content: formData.value.welcome.content
  }
}
//打开新建选择人
const openDepart = () => {
  DepartRef.value.isQRAuth = true
  DepartRef.value.departVisble = true
  DepartRef.value.selectedMember = [...creators.value]
}
// 获取部门成员
const getDepart = (res: any) => {
  creators.value = res
  formData.value.user_list = getSetionId('id', creators.value)
}
// 员工数据
const tags = reactive([])
// 员工移除
const handleClose = (tag: any) => {
  creators.value = creators.value.filter((item: any) => item.id !== tag.id)
  formData.value.user_list = getSetionId('id', creators.value)
  DepartRef.value.removeItem(tag)
}
// 打开选择标签
const selecTag = () => {
  BatchLabelRef.value.hasConditiion = false
  BatchLabelRef.value.dialogData.labelChooseType = 2
  BatchLabelRef.value.chooseDataArr = [...AllTags.value]
  BatchLabelRef.value.dialogVisible = true
}
// 获取标签
const getTags = (data: any) => {
  AllTags.value = data.data
  formData.value.tag_list = getSetionId('id', data.data)
  // formData.value.tag_list = getSetionId('id', data.data)
}
// 移除标签
const onClose1 = (tag: any) => {
  console.log(tag, "fdds")
  AllTags.value = AllTags.value.filter((item) => item.id != tag.id)
  console.log(AllTags.value, "aguo")
  formData.value.tag_list = getSetionId('id', AllTags.value)
}
// 插入名字
const onNickName = (text: string) => {
  if (props.pageType == 'look') return
  onInsertText(text)
  previewData.value[0] = {
    type: 0,
    content: formData.value.welcome.content
  }
}
//表情包管理
const chooseEmoji = (emoji: any) => {
  //事件。数据包含文本区域的值
  if (props.pageType == 'look') return
  onInsertText(emoji)
  // formData.value.welcome.content = formData.value.welcome.content + emoji
  previewData.value[0] = {
    type: 0,
    content: formData.value.welcome.content
  }
  emojiVisible.value = false
}
//打开素材上传框
// const onOpenMaterial = (num: string) => {
//   if (props.pageType == 'look') return

//   ZWMatericalLibRef.value.materVisible = true
//   ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
//   ZWMatericalLibRef.value.existFile = Number(9 - previewData.value.length) //打开对应的基础素材
// }
//获取素材
const getFiles = (res: any, local: boolean = false) => {
  console.log(res, '上传框返回的素材')
  if (res.length + formData.value.welcome.attachment.length > 9) {
    ElMessage.error('最多只能上传9个素材,请删除后再上传')
    return
  }
  // onLocalType(res)
  if (local) {
    if (res.data.length > 0) {
      res.data.forEach((item: any) => {
        item.type = res.type
        item.user_name = '张三'
        onLocalType(item, local)
      })
    }
  } else if (res instanceof Array) {
    if (res[0].type == 0) {
      onLocalType(res[0], local)
    } else {
      if (res.length > 0) {
        res.forEach((ite) => {
          ite.data.forEach((item: any) => {
            item.type = ite.type
            item.user_name = '张三'
            onLocalType(item, local)
          })
        })
      }
    }
  }
}

// 打开上传
const onOpenUpload = (num: string, flag: boolean = false) => {
  if (props.pageType == 'look') return

  if (flag) {
    const showTabs = ['1']
    ZWMatericalLibRef.value.showTabs = showTabs
    ZWMatericalLibRef.value.baseId = num
    ZWMatericalLibRef.value.materVisible = true
  } else {
    const showTabs = ['2', '4', '5', '3', '8', '6', '27', '99', '15', '11'].filter((v) => !props.filters.includes(v))
    ZWMatericalLibRef.value.showTabs = showTabs
    ZWMatericalLibRef.value.localUploadisShow = ['2', '3', '4', '5', '6']
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    if (num == '15') {
      ZWMatericalLibRef.value.multiple = false
    }
    ZWMatericalLibRef.value.existFile = Number(9 - previewData.value.length)
    ZWMatericalLibRef.value.materVisible = true
  }
}
// 删除上传的文件
const onRemove = (data: any) => {
  console.log(formData.value.welcome.attachment,data, 'ewew')
  if (props.pageType == 'look') return
  previewData.value = previewData.value?.filter((item: any) => item.id != data.id)
  formData.value.welcome.attachment = formData.value.welcome.attachment?.filter((item: any) => item.media_content_id != data.id)
  formData.value.welcome.local_link = formData.value.welcome.local_link?.filter((item: any) => item.link_share_image != data.cover_image_url)
  formData.value.welcome.local_content = formData.value.welcome.local_content?.filter((item: any) => item.id != data.id)
  console.log(formData.value.welcome.local_content, "shuju1")
}
const previewData = ref<any>([])
const onType = (v: any) => {
  console.log(v, '数据回显')

  if (v.content_id) {
    formData.value.welcome.attachment.push({
      type: v.type,
      media_content_id: v.content_id
    })
  } else {
    if(v.type == 3) {
        formData.value.welcome.local_link.push({
        type: v.type,
        link_title: v.link_title,
        link_url: v.link_url,
        link_decs: v.link_decs,
        link_share_image: v.link_share_image
      })
      }else {
        formData.value.welcome.local_content.push({
          type: v.type,
          code: v.media_file?.code,
          id: v.id
        })
      }
   
  }
  console.log(v, "ds")
  switch (v.type) {
    case 1: // 图片
      previewData.value.push({
        type: v.type,
        id: v.content_id ? v.content_id : v.id,
        cur_icon: '/static/file/pic.png',
        name: v.media_file?.name,
        absolute_url: v.media_file?.absolute_url
      })
      break
    case 2: // 视频
      previewData.value.push({
        type: v.type,
        id: v.content_id ? v.content_id : v.id,
        cur_icon: '/static/file/mov.png',
        name: v.media_file?.name,
        thumbnail_url: `${v.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
      })
      break
    case 3: // 链接
      previewData.value.push({
        type: v.type,
        id: v.content_id ? v.content_id : v.id,
        cur_icon: '/static/file/link.png',
        name: v.link_title,
        desc: v.link_decs,
        cover_image_url: v.link_share_image
      })
      break
    case 4: // 音频
      previewData.value.push({
        type: v.type,
        id: v.content_id ? v.content_id : v.id,
        cur_icon: '/static/file/mp3.png',
        name: v.media_file?.name
      })
      break
    case 5: // 文件
      previewData.value.push({
        type: v.type,
        id: v.content_id ? v.content_id : v.id,
        cur_icon: onURL(v.media_file?.url),
        name: v.media_file?.name
      })
      break
    case 6: // 抽奖
      previewData.value.push({
        type: v.type,
        id: v.content_id,
        url: v.link_share_image,
        cur_icon: '/static/file/wbgg.png',
        name: v.link_title
      })
      break
    case 7: // 商品素材
      previewData.value.push({
        type: 7,
        id: v.content_id,
        cur_icon: '/static/file/shop.png',
        name: v.link_title,
        user_name: false
      })
      break
    case 8: // 页面素材
      console.log('12222')
      previewData.value.push({
        type: 8,
        id: v.content_id,
        cur_icon: '/static/file/shop.png',
        name: v.link_title,
        user_name: false
      })
      break
    case 9: // 收集表
      previewData.value.push({
        type: 9,
        id: v.content_id,
        cur_icon: '/static/file/form.png',
        name: v.link_title,
        user_name: false
      })
      break
    case 10: // 公众号图文
      if (v.article_type == 5) {
        previewData.value.push({
          type: 10,
          cur_icon: '/static/file/pic.png',
          name: '图片',
          id: v.content_id
        })
      } else if (v.article_type == 3) {
        previewData.value.push({
          type: 10,
          cur_icon: '/static/file/mov.png',
          name: '视频',
          id: v.content_id
        })
      } else if (v.article_type == 4) {
        previewData.value.push({
          type: 10,
          cur_icon: '/static/file/mp3.png',
          name: '音频',
          id: v.content_id
        })
      } else if (v.article_type == 2) {
        previewData.value.push({
          type: 10,
          cur_icon: '/static/file/text.png',
          name: v.link_title,
          id: v.content_id
        })
      } else {
        previewData.value.push({
          type: 10,
          cur_icon: v.link_share_image,
          name: v.link_title,
          id: v.content_id
        })
      }
      break
    case 11: // 小程序
      console.log(v, 'fd')
      previewData.value.push({
        type: 11,
        id: v.content_id,
        cur_icon: '/static/file/miniApp.png',
        name: v.link_title,
        imgUrl: v.link_share_image,
        user_name: false
      })
      break
  }
}
const onLocalType = (v: any, local: boolean = false) => {
  if (local) {
    switch (v.type) {
      case 1: // 图片
        previewData.value.push({
          type: 1,
          id: v?.code,
          cur_icon: '/static/file/pic.png',
          name: v?.name,
          absolute_url: v?.url
        })
        formData.value.welcome.local_content.push({
          type: 1,
          code: v?.code
        })
        break
      case 4: // 音频
        previewData.value.push({
          type: 4,
          id: v?.code,
          cur_icon: '/static/file/mp3.png',
          name: v?.name
        })
        formData.value.welcome.local_content.push({
          type: 4,
          code: v?.code
        })
        break
      case 5: // 文件
        previewData.value.push({
          type: 5,
          id: v?.code,
          cur_icon: onURL(v?.url),
          name: v?.name
        })
        formData.value.welcome.local_content.push({
          type: 5,
          code: v?.code
        })
        break
      // case 4: // 视频
      case 2: // 视频
        previewData.value.push({
          type: 2,
          id: v?.code,
          cur_icon: '/static/file/mov.png',
          name: v?.name,
          thumbnail_url: `${v?.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`
        })
        formData.value.welcome.local_content.push({
          type: 2,
          code: v?.code
        })
        break
      case 6: // 链接
      case 3: // 链接
        previewData.value.push({
          type: 3,
          id: v?.link_url,
          cur_icon: '/static/file/link.png',
          name: v?.title,
          desc: v?.link_desc,
          cover_image_url: v?.cover_image_url
        })
        formData.value.welcome.local_link.push({
          link_title: v?.title,
          link_url: v?.link_url,
          link_desc: v?.link_desc,
          link_share_image: v?.cover_image_url
        })
        break
    }
  } else {
    switch (v.type) {
      case 0: // 文本
      case 'text': // 文本
        let arr = [...new Set(v.data)]
        arr.forEach((item: any) => {
          onInsertText(item.content)
          previewData.value[0] = {
            type: 0,
            content: formData.value.welcome.content
          }
        })
        break
      case 1: // 图片
      case 'image': // 图片
        // v.data.forEach((item: any) => {
        previewData.value.push({
          type: 1,
          id: v.id,
          cur_icon: '/static/file/pic.png',
          name: v.file_name,
          user_name: v.user_name,
          absolute_url: v.absolute_url
        })
        formData.value.welcome.attachment.push({
          type: 1,
          media_content_id: v.id
        })
        // })
        break
      case 2: // 视频
      case 'video': // 视频
        // v.data.forEach((item: any) => {
        previewData.value.push({
          type: 2,
          id: v.id,
          cur_icon: '/static/file/mov.png',
          name: v.file_name,
          user_name: v.user_name,
          thumbnail_url: v.thumbnail_url
        })
        formData.value.welcome.attachment.push({
          type: 2,
          media_content_id: v.id
        })
        // })
        break
      case 3: // 链接
      case 'link': // 链接
        previewData.value.push({
          type: 3,
          id: v.id,
          cur_icon: '/static/file/link.png',
          name: v.title,
          user_name: v.user_name,
          cover_image_url: v.cover_image_url
        })
        formData.value.welcome.attachment.push({
          type: 3,
          media_content_id: v.id
        })
        break
      case 4: // 音频
      case 'audio': // 音频
        previewData.value.push({
          type: 4,
          id: v.id,
          cur_icon: '/static/file/mp3.png',
          name: v.file_name,
          user_name: v.user_name
        })
        formData.value.welcome.attachment.push({
          type: 4,
          media_content_id: v.id
        })
        break
      case 5: // 文件
      case 'file': // 文件
        previewData.value.push({
          type: 5,
          id: v.id,
          cur_icon: onURL(v.mediaFileInfo?.name),
          name: v.mediaFileInfo?.name,
          user_name: v.user_name
        })
        formData.value.welcome.attachment.push({
          type: 5,
          media_content_id: v.id
        })
        break
      case 6: // 抽奖
      case 'luckcy': // 抽奖
        previewData.value.push({
          type: 6,
          id: v.id,
          url: v.qr_code_link,
          cur_icon: '/static/file/wbgg.png',
          name: v.activity_name,
          user_name: v.created_user
        })
        formData.value.welcome.attachment.push({
          type: 6,
          media_content_id: v.id
        })
        break
      case 9: // 收集表
      case 'collect': // 收集表
        previewData.value.push({
          type: 9,
          id: v.id,
          cur_icon: '/static/file/form.png',
          name: v.title,
          user_name: v.user_name
        })
        formData.value.welcome.attachment.push({
          type: 9,
          media_content_id: v.id
        })
        break
      case 7: // 电商
      case 'goods': // 电商产品素材
        previewData.value.push({
          type: 7,
          id: v.id,
          cur_icon: '/static/file/shop.png',
          name: v.product_name,
          user_name: v.user_name
        })
        formData.value.welcome.attachment.push({
          type: 7,
          media_content_id: v.id
        })
        break
      // case 12: // 电商
      case 8: // 电商
      case 'pages': // 电商页面素材
        previewData.value.push({
          type: 8,
          id: v.id,
          cur_icon: '/static/file/shop.png',
          name: v.page_name,
          user_name: v.user_name
        })
        formData.value.welcome.attachment.push({
          type: 8,
          media_content_id: v.id
        })
        // })
        break
      case 10: // 公众号图文
      case 'officialAccounts': // 公众号图文
        // 多图文 全部选择
        v.article_detail.forEach((item: any) => {
          if (item.type == 5) {
            previewData.value.push({
              type: 10,
              cur_icon: '/static/file/pic.png',
              name: '图片',
              id: item.id
            })
          } else if (item.type == 3) {
            previewData.value.push({
              type: 10,
              cur_icon: '/static/file/mov.png',
              name: '视频',
              id: item.id
            })
          } else if (item.type == 4) {
            previewData.value.push({
              type: 10,
              cur_icon: '/static/file/mp3.png',
              name: '音频',
              id: item.id
            })
          } else if (item.type == 2) {
            previewData.value.push({
              type: 10,
              cur_icon: '/static/file/text.png',
              name: item.title,
              id: item.id
            })
          } else {
            previewData.value.push({
              type: 10,
              cur_icon: item.cover,
              name: item.title,
              id: item.id
            })
          }
          formData.value.welcome.attachment.push({
            type: 10,
            media_content_id: item.id
          })
        })
        break
      case 11: // 小程序
        previewData.value.push({
          type: 11,
          id: v.id,
          cur_icon: '/static/file/miniApp.png',
          name: v.title,
          user_name: v.user_name,
          imgUrl: v.image_url
        })
        formData.value.welcome.attachment.push({
          type: 11,
          media_content_id: v.id
        })
        // })
        break
    }
  }
}
const submitHandel = (v: any) => {
  console.log(v, '选择已有素材确认')
  previewData.value = []
  previewData.value[0] = {
    type: 0,
    content: v.content
  }
  formData.value.welcome = {
    type: 3,
    content: v.content,
    attachment: [],
    local_link: [],
    local_content: []
  }
  v.welcome_friend_attachment.forEach((item: any) => {
    onType(item)
  })
}

// 分时段欢迎语
const addTime = () => {
  formData.value.time_welcome.push({
    week: [], // 星期几
    send_time: [],
    type: 1, // 欢迎语类型
    content: '', // 内容
    attachment: [],
    local_link: [],
    local_content: []
  })
  let weekList: any = []
  formData.value.time_welcome.forEach((item: any) => {
    weekList = [...weekList, ...item.week]
  })
  weekOptionList.value.push([
    { label: 1, name: '周一', disabled: weekList.includes(1) },
    { label: 2, name: '周二', disabled: weekList.includes(2) },
    { label: 3, name: '周三', disabled: weekList.includes(3) },
    { label: 4, name: '周四', disabled: weekList.includes(4) },
    { label: 5, name: '周五', disabled: weekList.includes(5) },
    { label: 6, name: '周六', disabled: weekList.includes(6) },
    { label: 0, name: '周日', disabled: weekList.includes(0) }
  ])
}
const ChooseWelcomeRef = ref<any>(null)
const onChooseWelcome = () => {
  ChooseWelcomeRef.value.appDialog.visible = true
}
watch(
  () => formData.value.welcome.content,
  (newV: any, oldV: any) => {
    if (formData.value.welcome?.content?.length <= 1000) {
      onName()
    } else {
      formData.value.welcome.content = oldV
    }
  },
  { immediate: true }
)
const onLookData = (val: any) => {
  onName()
  console.log(val, '欢迎语父组件')
  val?.forEach((item: any) => {
    onType(item)
  })
}
const lookData = ref<any>([])
const onLookTime = (v: any) => {
  console.log('分时段欢迎语', v)
  formData.value.time_welcome = v
  lookData.value = v
}
const onSubmit = async () => {
  console.log('兜底校验')
  if (!formRef.value) return
  console.log('formRef', formRef.value)
  await formRef.value!.validate((valid: any, fields: any) => {
    console.log('valid', fields)
    if (valid) {
      emit('submit')
    } else {
      console.log(fields, '000---')

      let num = +Object.keys(fields)[0][13] + 1
      let message = !!num ? `时段${num}：${Object.values(fields)[0][0].message}` : Object.values(fields)[0][0].message
      ElMessage.warning(message)
    }
  })
}
watch(
  () => props.filters,
  (value) => {
    console.log('filters', value)
    uploadList = uploadList.filter((item: any) => !value.includes(item.id))
  },
  { immediate: true }
)
defineExpose({
  formData,
  AllTags,
  creators,
  previewData,
  welcome_flag,
  getDepart,
  onSubmit,
  onLookData,
  onLookTime,
  tag_flag
})
</script>

<style lang="scss" scoped>
.welcome_type {
  margin-bottom: 0;
}
.img_box {
  // display: grid;
  // grid-template-columns: 64px 110px 1fr;
  // grid-gap: 20px;
  // font-size: 10px;
  display: flex;
  grid-gap: 20px;
  padding-left: 36px;

  .text {
    padding-top: 80px;
    font-size: 12px;
    color: #999;
  }
}
$num: 2;
@mixin ellips($num) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  line-clamp: $num;
  -webkit-box-orient: vertical;
}
:deep .el-checkbox {
  margin-right: 18px;
}
.pop_select_box {
  height: 84px;

  .upload_btn {
    margin-top: 8px;
  }

  .upload_pop {
    width: 480px;
    height: 84px;
    background: #ffffff;
    border-radius: 12px;
    // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item_pop {
      width: 80px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .item_pop_icon {
        width: 40px;
        cursor: pointer;
        border: 1px solid transparent;
        &:hover {
          border: 1px solid #ed742e;
        }
      }

        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
          white-space: nowrap;
        }
      }
    }
  }
  .container {
    position: relative;
    width: 600px;
    height: 480px;
    background: #f8f8f8;
    border-radius: 4px;
    :deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      background-color: #f8f8f8;
      border-bottom: 1px solid #eaeaea;
    }
    .text_btn {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      padding: 0 15px;
      color: #ff6b00;
    }
    .text_hover {
      position: absolute;
      bottom: 15px;
      left: 15px;
      z-index: 10;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 12px;
      color: #969696;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
    }
    .upload_list_box {
      overflow: hidden;
      height: 230px;
    }

  .upload_list {
    .upload_item {
      margin-top: 5px;
      width: 440px;
      height: 32px;
      box-sizing: border-box;
      background: #eaeaea;
      display: flex;
      padding: 0px 10px 0px 14px;
      align-items: center;

      .file_icon {
        width: 20px;
        height: 20px;
        margin-right: 7px;
      }

      .file_name {
        width: 375px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .del_icon {
        width: 10px;
        height: 10px;
        cursor: pointer;
      }
    }
  }
  .prev_box {
    flex: 1;
    position: absolute;
    right: -480px;
    top: 0;

    .phone_con {
      // justify-content: center;
      position: relative;
      margin: -20px auto;
      width: 244px;
      height: 495px;
      box-sizing: border-box;
      border-radius: 36px;
      border: 9px solid #eef5fe;
      background: url('@/assets/image/channel/phone_bg.png');
      background-size: cover;

      .phone-title {
        position: absolute;
        top: -40px;
        left: 75px;
      }

      .phone_List {
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        top: 48px;
        height: 380px;
        bottom: 48px;
        padding: 7px 10px;

        .bg_friend {
          // width: 100%;

          .public_title {
            font-size: 11px;
            margin-top: -10px;
            text-align: center;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
          }
          .public_time {
            margin-top: -19px;
            text-align: center;
            font-size: 11px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #969696;
          }
          .user_con {
            margin-top: 10px;
            display: flex;
            .user_avator {
              width: 22px;
              height: 22px;
              margin-right: 4px;
            }
            .friend_main {
              flex: 1;
              .user_name {
                font-size: 12px;
                margin-top: -8px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #969696;
                transform: scale(0.6);
                transform-origin: left top;
                margin-bottom: 4px;
              }
              .welcomeWords {
                position: relative;
                margin-top: -23px;
                font-size: 12px;
                color: #969696;
                line-height: 15px;
                transform: scale(0.6);
                transform-origin: left top;
                width: 160px;
                box-sizing: border-box;
                height: 67px;
                overflow: hidden;
                padding: 5px 10px;
                background-color: #fff;
                border-radius: 5px;
                @include ellips(4);
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 10px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 8px solid #fff;
                  border-bottom: 5px solid transparent;
                }
              }
              .send_image {
                width: 68px;
                height: 46px;
                margin-top: -23px;
              }
              .video_list {
                position: relative;
                width: 80px;
                height: 55px;
                margin-top: -23px;

                .video_image {
                  width: 100%;
                  height: 100%;
                }
                .video_play {
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }
              .user_link {
                // margin-left: 5px;
                margin-top: -23px;
                position: relative;
                width: 151px;
                height: 65px;
                box-sizing: border-box;
                padding: 5px 10px;
                border-radius: 5px;
                background: #ffffff;
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 10px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 8px solid #fff;
                  border-bottom: 5px solid transparent;
                }
                .user_link_tit {
                  width: 100%;
                  font-size: 12px;
                  font-family: STHeitiSC-Light, STHeitiSC;
                  font-weight: 300;
                  color: #000000;
                  transform: scale(0.83);
                  transform-origin: left top;
                  @include ellips(2);
                }
                .user_link_main {
                  margin-top: 4px;
                  display: flex;
                  .user_link_desc {
                    width: 110px;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    transform: scale(0.6);
                    transform-origin: left top;
                    margin-top: 2px;
                    @include ellips(3);
                  }
                  .user_link_icon {
                    width: 22px;
                    height: 22px;
                  }
                }
              }
              .user_file {
                position: relative;
                // margin-left: 5px;
                margin-top: -23px;
                width: 150px;
                height: 48px;
                box-sizing: border-box;
                padding: 8px;
                border-radius: 3px;
                background: #ffffff;
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 6px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 10px solid #fff;
                  border-bottom: 5px solid transparent;
                }
                .user_file_main {
                  display: flex;
                  .user_file_desc {
                    width: 105px;
                    font-size: 12px;
                    transform: scale(0.83);
                    transform-origin: left top;
                    margin-bottom: 2px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #000000;
                    @include ellips(2);
                  }
                  .user_file_icon {
                    width: 30px;
                    height: 30px;
                  }
                }
                .user_file_size {
                  // margin-top: 2px;
                  font-family: STHeitiSC-Light, STHeitiSC;
                  font-weight: 300;
                  color: #969696;
                  font-size: 12px;
                  transform: scale(0.6);
                  transform-origin: left top;
                }
              }
            }
          }
        }
      }
    }
  }
  .welc_time_top {
    display: flex;
    align-items: center;
    width: 600px;
    height: 40px;

    font-size: 14px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #33302db3;
    line-height: 20px;
    background: #fffaf9;
    .radius_left {
      width: 8px;
      height: 8px;
      margin: 0 20px;
      border-radius: 50%;
      background: #ff6b00;
    }
  }
  .welc_content_t {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .welc_color {
      width: 3px;
      height: 18px;
      background: #ff6b00;
      margin-right: 10px;
    }
  }
  .welc_content_c {
    width: 600px;
    height: 103px;
    padding: 0 0 0 10px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .check_box {
      display: flex;
      margin-bottom: 6px;
    }
  }
}
.form-staffs {
  display: flex;

  .title {
    margin-right: 12px;
  }

  .staffs {
    &_item {
      height: 22px;
      line-height: 22px;
      margin-right: 6px;
      // padding: 0;
      color: #35383a;
      border: 1px solid #fffaf9;
      border-radius: 1px 1px 1px 1px;
      background: #fffaf9;
    }

    :deep .el-tag .el-icon {
      width: 12px;
      height: 12px;
      color: #ffffff;
      background: #d9d9d9;
    }

    :deep .el-tag .el-icon svg {
      margin: 0px;
    }

    :deep .el-tag .el-tag__close:hover {
      background: #d9d9d9;
    }

    :deep span.el-tag.el-tag--light.staffs_item:before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 11px;
      background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
      margin-right: 10px;
    }
  }
  
}
.staff {
  margin-left: 15px;
}
</style>
